<template>
   <div class="page" :style="{width:width+'px',height:height+'px'}">
          <div class="page__bd" >
            <div class="weui-tab">
              <div class="weui-navbar">
                <block v-for="(item,index) in tabs" :key="index">
                  <div :id="index" :class="{'weui-bar__item_on':activeIndex == index}" class="weui-navbar__item" @click="tabClick">
                    <div class="weui-navbar__title">{{item}}</div>
                  </div>
                </block>
                <div class="weui-navbar__slider" :class="navbarSliderClass"></div>
              </div>
              <div class="weui-tab__panel">
                <div class="weui-tab__content" :hidden="activeIndex != 0">
                  <div class="blank"></div>
                    <div class="question" v-for="i in 10" :key=i>
                        <div class="questionNum">
                          第一题
                             <p class="p2"><span>删除</span>  </p>
                        </div>
                        <div class="questionContent">
                          <div class="questionTitle">
                            在一定社会形态中占主导地位的生产关系的总和，构成这个社会的（）。
                          </div>
                          <div class="questionAnswer">
                              <p><span>A</span>上层建筑</p>
                              <p><span>B</span>社会制度</p>
                              <p><span>C</span>经济基础</p>
                              <p><span>D</span>意识形态</p>
                          </div>
                        </div>
                        <div class="analyseAnswer">
                            <p>正确答案：C </p>
                            <p>所在章节：社会建设 </p>
                            <p>知识点：   社会建设 </p>
                            <p>答案解析：</p>
                            <p>经济基础即社会的经济结构，是指一定社会中占统治地位的生产关系各方面的总和。</p>
                        </div>
                  </div>
                </div>
                <div class="weui-tab__content" :hidden="activeIndex != 1">
                   <div class="blank"></div>
                      多选题
                </div>
                 <div class="weui-tab__content" :hidden="activeIndex != 2" >
                   <div class="blank"></div>
                      填空题
                 </div>
                  <div class="weui-tab__content" :hidden="activeIndex != 3">
                     <div class="blank"></div>
                       判断题
                </div>
              </div>
            </div>
          </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tabs: ['单选题', '多选题', '判断题', '填空题'],
      activeIndex: 0
    }
  },
  computed: {
    navbarSliderClass () {
      if (Number(this.activeIndex) === 0) {
        return 'weui-navbar__slider_0'
      }
      if (Number(this.activeIndex) === 1) {
        return 'weui-navbar__slider_1'
      }
      if (Number(this.activeIndex) === 2) {
        return 'weui-navbar__slider_2'
      }
      if (Number(this.activeIndex) === 3) {
        return 'weui-navbar__slider_3'
      }
    }
  },
  methods: {
    tabClick (e) {
      if (Number(e)) {
        this.activeIndex = 0
      } else {
        this.activeIndex = e.currentTarget.id
      }
      console.log(e.currentTarget.id)
      wx.showLoading({
        title: '加载中',
        success () {
          wx.hideLoading()
        }
      })
    }

  },
  mounted () {
  }
}
</script>
<style lang="stylus" scoped>
.page{
    background #f7f7f7
}
.page__bd{
  background white
}
.weui-navbar__slider_0 {
    left  0rpx
    transform translateX(50%)
}
.weui-navbar__slider_1 {
    left 25%
    transform translateX(50%)
}
.weui-navbar__slider_2 {
    left 50%
    transform translateX(50%)
}
.weui-navbar__slider_3 {
    left 75%
    transform translateX(50%)
}
.weui-navbar__slider {
    width 100rpx
}
.weui-navbar{
  border-bottom 0
  background white
}
.blank{
  height  20rpx
  background #f7f7f7
}
.question{
   padding 0 32rpx
   margin-bottom 20rpx
   overflow hidden
   background white
   .questionNum{
     font-size 30rpx
     color #333
     height 98rpx
     line-height 98rpx
     border-bottom 2rpx solid #e6e6e6
    .p2{
        float right
        width 112rpx
        span{
          display inline-block
          width 112rpx
          height 46rpx
          background #febd32
          color white
          font-size 26rpx
          text-align center
          line-height  46rpx
          border-radius 6rpx
          -webkit-border-radius 6rpx
        }
     }
   }
   .questionTitle{
     font-size 32rpx
     color #333333
     padding 20rpx 0
   }
 }
 .questionContent{
   padding-bottom 30rpx
 }
.questionAnswer{
    p{
      font-size 32rpx
      color #666666
      padding 18rpx 0
      padding-left 30rpx
      span{
        display inline-block
        width 48rpx
        height 48rpx
        border-radius 50%
        margin-right 30rpx
        border 1px solid #a5a5a5
        text-align center
        line-height 48rpx
      }
    }
}
.analyseAnswer{
  padding  20rpx 22rpx
  background #ebebeb
  font-size 32rpx
  color #333333
  border-radius 12rpx
  -webkit-border-radius 12rpx
  margin-bottom 20rpx
  p{
    line-height 60rpx
  }
  p:last-child{
    font-size 28rpx
  }
}
.weui-tab__panel{
  background #f7f7f7
}
</style>
